<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createGifBillboardGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import gif1 from "../../../../assets/img/map_marker/g1.gif"
import gif3 from "../../../../assets/img/map_marker/2.gif"
import gif4 from "../../../../assets/img/map_marker/3.gif"
import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
  <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createGifBillboardGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import gif1 from "../../../../assets/img/map_marker/g1.gif"
import gif3 from "../../../../assets/img/map_marker/2.gif"
import gif4 from "../../../../assets/img/map_marker/3.gif"


const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError: 1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value, [113.59, 34.74], 3000);

  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.593, "lat": 34.75, "height": 100},
    url: gif1,
    scale: 2,
  })
  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.59, "lat": 34.745, "height": 100},
    url: gif3,
    scale: 0.5,
  })
  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.596, "lat": 34.74, "height": 100},
    url: gif4,
    scale: 1,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(() => {
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>

`);

const tsStr = ref(`

import * as Cesium from "cesium";
import SuperGif from "libgif";

  /**
 * gif 图片投影
 * @param {object} options
 * @param {object} options.position - 坐标 eg:{"lon":113.59,"lat":34.74,height:50}
 * @param {string} options.url - gif 的内容 或者 gif的路径，gif放public下
 * @param {Cartesian3} options.scale - 放大倍数
 * @desc 注：因为是一帧帧的遍历，gif应该尽可能的小最好500k左右不要超过1M,创建数量也应少
 */
const createGifBillboardGraphics = (viewer: any, options: any) => {
    let {position, url, scale,width,height} = options;
    if (!position) {
        return;
    }
    let gif: Array<any> = [];
    let i = 0;
    let speed = 6;
    // 遍历gif的每一帧
    const parseGifImages = function (url: string, imageArr: Array<any>, callback: any) {
        let img = document.createElement("img");
        img.src = url;
        img.setAttribute("rel:animated_src", url); // gif库需要img标签配置下面两个属性
        img.setAttribute("rel:auto_play", "0");
        document.body.appendChild(img);
        // 新建gif实例
        let rub = new SuperGif({
            gif: img,
        });
        rub.load(() => {
            for (let i = 1; i <= rub.get_length(); i++) {
                rub.move_to(i); // 遍历gif实例的每一帧
                imageArr.push(rub.get_canvas().toDataURL());
            }
            if (callback) {
                callback(imageArr)
            }
        });
    };

    parseGifImages(url, gif, (res: any) => {
        return viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(position['lon'], position['lat'], position['height']),
            billboard: {
                verticalOrigin: Cesium.VerticalOrigin.BASELINE,
                image: new Cesium.CallbackProperty(function () {
                    if (gif.length) {
                        // 解析每一帧
                        if (i < speed * (gif.length - 1)) {
                            i++;
                        } else {
                            i = 0;
                        }
                        return gif[Math.floor(i / speed)];
                    } else {
                        return url; //因为loadGif是异步的，在解析完成之前先使用原图
                    }
                }, false),
                scale: scale || 1.2,
            },
        });
    });
}
export {
   createGifBillboardGraphics
}
`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError: 1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value, [113.59, 34.74], 3000);

  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.593, "lat": 34.75, "height": 100},
    url: gif1,
    scale: 2,
  })
  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.59, "lat": 34.745, "height": 100},
    url: gif3,
    scale: 0.5,
  })
  createGifBillboardGraphics(cViewer.value, {
    position: {"lon": 113.596, "lat": 34.74, "height": 100},
    url: gif4,
    scale: 1,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(() => {
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
